import { Menu, Button } from "antd";
import {
  // MenuUnfoldOutlined,
  // MenuFoldOutlined,
  PieChartOutlined,
  MailOutlined,
} from "@ant-design/icons";
import { useState } from "react";
import React from "react";
import { Link, useLocation } from "react-router-dom";
import menuList from "../../../config/menuConfig";
const { SubMenu } = Menu;

function LeftMenu() {
  const { pathname } = useLocation();
  let defaultSelectedKeys = "home";
  let defaultOpenKeys = [];
  if (pathname) {
    const pathArr = pathname.split("/");
    defaultSelectedKeys = pathname.indexOf("product")
      ? "product"
      : pathArr.pop();
    defaultOpenKeys = pathArr.splice(2);
  }
  const [collapsed, setCollapsed] = useState(false);
  const toggleCollapsed = () => {
    console.log("change");
    setCollapsed(!collapsed);
    console.log({ collapsed });
  };
  const createMenu = (target) => {
    return target.map((item) => {
      if (!item.children) {
        return (
          <Menu.Item key={item.key} icon={<PieChartOutlined />}>
            <Link to={item.path}>{item.title}</Link>
          </Menu.Item>
        );
      } else {
        return (
          <SubMenu key={item.key} icon={<MailOutlined />} title={item.title}>
            {createMenu(item.children)}
          </SubMenu>
        );
      }
    });
  };
  return (
    <div>
      <Button
        type="primary"
        onClick={toggleCollapsed}
        style={{ marginBottom: 16 }}
      >
        {/* {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined)} */}
      </Button>
      <Menu
        defaultSelectedKeys={defaultSelectedKeys}
        defaultOpenKeys={defaultOpenKeys}
        mode="inline"
        theme="dark"
        // inlineCollapsed={collapsed}
      >
        {createMenu(menuList)}
      </Menu>
    </div>
  );
}

export default LeftMenu;
